<template>
  <div>
    <Form ref="form" :model="formItem" inline :label-width="100">
      <FormItem label="院区" prop="areaID">
        <Select v-model="formItem.areaID" style="width: 200px" @on-change="areaChg">
          <Option v-for="item in area" :value="item.areaID" :key="item.areaID">{{
            item.name
            }}</Option>
        </Select>
      </FormItem>
      <FormItem label="科室" prop="categoryID">
        <TreeSelect :data="treeList.data" @on-select-change="treeChg" v-model="formItem.categoryID" multiple
          style="width:200px;">
        </TreeSelect>
      </FormItem>
      <FormItem label="上传状态" prop="uploadStatus">
        <Select v-model="formItem.uploadStatus" style="width: 200px">
          <Option :value="''" key="''">全部</Option>
          <Option :value="1" key="1">已上传</Option>
          <Option :value="2" key="2">未上传</Option>
        </Select>
      </FormItem>
      <FormItem label="审核状态" prop="checkStatus">
        <Select v-model="formItem.checkStatus" style="width: 200px">
          <Option :value="''" key="''">全部</Option>
          <Option :value="1" key="1">已审核</Option>
          <Option :value="0" key="0">未审核</Option>
          <Option :value="-1" key="-1">驳回</Option>
        </Select>
      </FormItem>
      <FormItem label="清单质控" prop="flag">
        <Select v-model="formItem.flag" style="width: 200px">
          <Option :value="0" key="0">全部</Option>
          <Option :value="1" key="1">正常</Option>
          <Option :value="2" key="2">异常</Option>
        </Select>
      </FormItem>
      <FormItem label="DRG分组" prop="drG_Code">
        <Input v-model="formItem.drG_Code" placeholder="" style="width: 100px"></Input>
        <!-- <AutoComplete v-model="formItem.drg" :data="data3" :filter-method="filterMethod" placeholder=""
                style="width:200px">
            </AutoComplete> -->
      </FormItem>
      <FormItem label="倍率类型" prop="mag">
        <Select v-model="formItem.mag" style="width: 200px">
          <Option value="0" key="0">正常</Option>
          <Option value="1" key="1">低倍率</Option>
          <Option value="2" key="2">高倍率</Option>
        </Select>
      </FormItem>
      <FormItem label="医保类型" prop="yblx">
        <Select v-model="formItem.yblx" style="width: 200px">
          <Option value="01" key="0">城镇职工基本医疗保险</Option>
          <Option value="02" key="1">城镇居民基本医疗保险</Option>
          <Option value="03" key="2">新型农村合作医疗</Option>
          <Option value="04" key="3">贫困救助</Option>
          <Option value="05" key="4">商业医疗保险</Option>
          <Option value="06" key="5">全公费</Option>
          <Option value="07" key="6">全自费</Option>
          <Option value="90" key="7">城乡居民医疗保险</Option>
          <Option value="99" key="8">其他</Option>
        </Select>
      </FormItem>
      <FormItem label="清单编码员" prop="coder">
        <Input v-model="formItem.coder" placeholder="" style="width: 100px"></Input>
      </FormItem>
      <FormItem label="再入院" prop="outAgainType">
        <Select v-model="formItem.outAgainType" style="width: 200px">
          <Option value="0" key="0">全部</Option>
          <Option value="1" key="1">7天再入院</Option>
          <Option value="2" key="2">14天再入院</Option>
          <Option value="3" key="3">24小时出入院</Option>
        </Select>
      </FormItem>
      <FormItem label="出院时间">
        <DatePicker v-model="formItem.time1" type="daterange" placement="bottom-end" placeholder="请选择"
          style="width: 200px" @on-change="chg1" />
      </FormItem>
      <FormItem label="结算时间">
        <DatePicker v-model="formItem.time2" type="daterange" placement="bottom-end" placeholder="请选择"
          style="width: 200px" @on-change="chg2" />
      </FormItem>
      <FormItem label="姓名" prop="realName">
        <Input v-model="formItem.realName" placeholder="" style="width: 100px"></Input>
      </FormItem>
      <FormItem label="病案号" prop="number">
        <Input v-model="formItem.number" placeholder="" style="width: 100px"></Input>
      </FormItem>
      <Space><Button type="primary" icon="ios-search" @click="initList(1, 15)">搜索</Button><Button type="error"
          @click="clear" icon="md-refresh">重置</Button>
      </Space>
    </Form>
    <Row>
      <Col span="24">
      <Table :paras="{
        columns: table.columns,
        data: table.data,
        loading: table.load,
        pageNo: formItem.pageNo,
        pageSize: formItem.pageSize,
      }" @on-sort-change="sortCustomer">
        <template #magType="{ row }">
          <Tag color="blue" v-if="row.magType === 0">正常</Tag>
          <Tag color="green" v-if="row.magType === 1">低倍率</Tag>
          <Tag color="warning" v-if="row.magType === 2">高倍率</Tag>
        </template>
        <template #Status="{ row }">
          <Tag color="green" v-if="row.status === 0">未审核</Tag>
          <Tag color="warning" v-if="row.status === 1">已审核</Tag>
        </template>
        <template #sex="{ row }">
          <Tag color="yellow" v-if="row.sex == 0">未知的性别</Tag>
          <Tag color="blue" v-if="row.sex == 1">男</Tag>
          <Tag color="magenta" v-if="row.sex == 2">女</Tag>
          <Tag color="red" v-if="row.sex == 9">未说明的性别</Tag>
        </template>
        <!-- 医保类型 -->
        <template #insureType="{ row }">
          {{ ybInfoEnum[row.insureType] }}
        </template>
        <template #outDate="{ row }">
          {{ $Date(row.outDate).format('YYYY-MM-DD') }}
        </template>
        <template #settleDate="{ row }">
          {{ $Date(row.settleDate).format('YYYY-MM-DD') }}
        </template>
        <template #totalFee="{ row }">
          <Numeral :value="row.totalFee" format="0,0.00">
            <template #prefix>
              <strong>¥</strong>
            </template>
          </Numeral>
        </template>
        <template #number="{ row }">
          <Link :to="{
            path: '/Settlement/newList/Detail',
            query: { listID: row.listID },
          }">
          {{ row.number }}
          </Link>
        </template>
        <template #DrgName="{ row }">
          <Ellipsis :text="row.drgName" :length="10" tooltip />
        </template>
        <template #diag_Name="{ row }">
          <Ellipsis :text="row.diag_Name" :length="10" tooltip />
        </template>
        <template #oper_Name="{ row }">
          <Ellipsis :text="row.oper_Name" :length="10" tooltip />
        </template>
        <template #checkStatus="{ row }">
          <Tag color="blue" v-if="row.checkStatus === 0">未审核</Tag>
          <Tag color="red" v-if="row.checkStatus === -1">驳回</Tag>
          <Tag color="green" v-if="row.checkStatus === 1">通过</Tag>
        </template>

        <!-- <template #Action="{ row }">
                    <Space>
                        <Tooltip content="编辑" placement="top" transfer><Button type="primary" icon="md-create"
                                @click="add(2, row)"></Button></Tooltip>
                        <Poptip transfer confirm title="是否删除?" @on-ok="cancel(row.spid)" @on-cancel="cancel" ok-text="是"
                            cancel-text="否">
                            <Tooltip content="删除" placement="top" transfer><Button type="error"
                                    icon="md-close-circle"></Button></Tooltip>
                        </Poptip>
                    </Space>
                </template> -->
      </Table>
      <Pager :paras="{ total: table.total, page: formItem.pageNo, size: formItem.pageSize }" @toPage="initList"
        @toSize="initList">
      </Pager>
      </Col>
    </Row>
  </div>
</template>
<script setup>
import { onActivated } from 'vue'
import { ybInfoEnum } from './components/infoEnum.js'

import http from '@/util/http'
import { reactive } from 'vue'
import Table from '@/components/system/Table.vue'
import Pager from '@/components/system/Pager.vue'
let form = ref()
const area = ref([])
const initArea = () => {
  http.get('/Basic/Area/ListByUser', {}, (response) => {
    area.value = response.data.data
  })
}
initArea()

const areaChg = (areaID) => {
  initTreeList()
}

let treeList = reactive({ data: [] })
const initTreeList = () => {
  http.get('/Basic/Category/TreeList?areaID=' + formItem.areaID, {}, (response) => {
    treeList.data = response.data.data
  })
}
const chg1 = (date1, date2) => {
  formItem.startOutDate = date1[0] + ' 00:00:00'
  formItem.endOutDate = date1[1] + ' 23:59:59'
}
const chg2 = (date1, date2) => {
  formItem.startCaclDate = date1[0] + ' 00:00:00'
  formItem.endCaclDate = date1[1] + ' 23:59:59'
  console.log(formItem.startCaclDate)
}
const clear = () => {
  formItem.endOutDate = formItem.endCaclDate = ''
  formItem.time1 = formItem.time2 = []
  formItem.startCaclDate = formItem.startOutDate = ''
  form.value.resetFields()
}
let formItem = reactive({
  time1: [],
  time2: [],
  categoryID: [],
  uploadStatus: '',
  checkStatus: '',
  drG_Code: '',
  flag: 0,
  mag: -1,
  realName: '',
  number: '',
  yblx: '',
  coder: '',
  outAgainType: 0,
  startOutDate: '',
  endOutDate: '',
  startCaclDate: '',
  endCaclDate: '',
  pageSize: 15,
  pageNo: 1,
  col: '',
  sort: ''
})

let table = reactive({
  data: [],
  total: 0,
  columns: [
    {
      title: '科室',
      align: 'center',
      key: 'categoryName',
      width: 200,
    },
    {
      title: '病案号',
      align: 'center',
      key: 'number',
      width: 150,
      fixed: 'left',
      slot: 'number',
    },
    {
      title: '姓名',
      align: 'center',
      key: 'realName',
      fixed: 'left',
      width: 150,
    },
    {
      title: 'DRG编码',
      align: 'center',
      key: 'drgCode',
      width: 150,
    },
    {
      title: 'DRG名称',
      align: 'center',
      key: 'drgName',
      // slot: 'drgName',
      width: 200,
    },
    {
      title: '主要诊断',
      align: 'center',
      key: 'diag_Name',
      slot: 'diag_Name',
      width: 200,
    },
    {
      title: '主要手术及操作',
      align: 'center',
      key: 'oper_Name',
      slot: 'oper_Name',
      width: 200,
    },
    {
      title: '倍率',
      align: 'center',
      key: 'mag',
      width: 150,
      sortable: 'custom'
    },
    {
      title: '倍率类型',
      align: 'center',
      key: 'magType',
      width: 100,
      slot: 'magType',
    },
    {
      title: '结算方式',
      align: 'center',
      key: 'calculationType',
      width: 220,
    },
    {
      title: '医保类型',
      align: 'center',
      key: 'insureType',
      slot: 'insureType',
      width: 230,
    },
    {
      title: '性别',
      align: 'center',
      key: 'sex',
      width: 100,
      fixed: 'left',
      slot: 'sex',
    },
    {
      title: '医疗总费用',
      align: 'center',
      key: 'totalFee',
      width: 150,
      slot: 'totalFee',
    },
    {
      title: '住院天数',
      align: 'center',
      key: 'inDays',
      width: 100,
    },
    {
      title: '出院日期',
      align: 'center',
      key: 'outDate',
      width: 150,
      fixed: 'right',
      slot: 'outDate',
    },
    {
      title: '结算日期',
      align: 'center',
      key: 'settleDate',
      width: 150,
      slot: 'settleDate',
    },
    {
      title: '主治医生',
      align: 'center',
      key: 'doctor',
      width: 150,
    },
    {
      title: '清单编码员',
      align: 'center',
      key: 'coder',
      width: 150,
    },
    {
      title: '审核状态',
      align: 'center',
      key: 'checkStatus',
      fixed: 'right',
      width: 100,
      slot: 'checkStatus',
    },
  ],
  load: true,
})

const goDetail = (row) => {
  console.log(row)
  window.open(`/Settlement/newList/Detail/number=${row.number}&listID=${row.listID}`)
}

const initList = (page, size) => {
  formItem.pageNo = page
  formItem.pageSize = size
  table.load = true

  http.post('/Settlement/List/PageList', toRaw(formItem), (response) => {
    table.load = false
    table.data = response.data.data.list
    table.total = response.data.data.total
  })
}

const sortCustomer = (column) => {
  formItem.col = column.key
  formItem.sort = column.order
  initList(1, 15)
}

// initList(1, 15)
onActivated(() => {
  initList(1, 15)
})
</script>
